@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式可以添加在这里 */
body {
  @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 修复页面布局和滚动问题 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#root {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 确保滚动仅发生在内容区域，而不是整个页面 */
.flex-1.overflow-y-auto {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  position: relative;
}

/* Markdown内容样式增强 */
.markdown-content {
  @apply text-gray-800 dark:text-gray-200;
}

/* 优化宽屏下的Markdown可读性 */
.prose {
  @apply max-w-none;
}

/* 在宽屏幕上保持段落合理的行长度 */
.prose p {
  max-width: 80ch;
}

/* 代码块样式 */
.markdown-content pre {
  @apply bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-x-auto my-4;
  margin: 0;
}

.markdown-content code {
  @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded;
}

.markdown-content pre code {
  @apply bg-transparent p-0;
}

/* 增强代码块样式 */
.markdown-content .code-block {
  @apply border border-gray-300 dark:border-gray-700 rounded-md overflow-hidden my-4;
  position: relative;
}

/* 代码语言标签 */
.code-language {
  @apply bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs px-2 py-1 rounded-br-md;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 代码操作按钮 */
.code-actions {
  @apply flex space-x-2 bg-gray-200 dark:bg-gray-800 rounded-bl-md;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.code-action-btn {
  @apply text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-xs px-2 py-1;
}

/* 表格样式 */
.markdown-content table {
  @apply w-full border-collapse my-4;
}

.markdown-content th,
.markdown-content td {
  @apply border border-gray-300 dark:border-gray-700 px-3 py-2;
}

.markdown-content th {
  @apply bg-gray-100 dark:bg-gray-800;
}

/* 打字机光标样式 */
.typing-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 代码行号样式 */
.markdown-content pre .linenumber {
  @apply text-gray-500 dark:text-gray-500 mr-4 select-none;
  display: inline-block;
  min-width: 1.25em;
  padding-right: 1em;
  text-align: right;
  user-select: none;
}

/* 折叠代码块样式 */
.code-fold-message {
  @apply bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-center py-1 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600;
}
